<script setup>
import { reactive } from 'vue'
/*
  注意点
  reactive函数只能传入对象和数组
  reactive函数包裹的数据不能直接赋值
 */
const person = reactive({
  name: '张三',
  age: 18
})
const changeName = () => person.name = '李四'
const addAge = () => person.age++
</script>

<template>
  <div>{{ person }}</div>
  <button @click="changeName">修改姓名</button>
  <button @click="addAge">增加年龄</button>
</template>

<style scoped></style>